<template>
  <ele-table-select
    ref="selectRef"
    v-model="selectedValue"
    multiple
    clearable
    placeholder="请选择"
    value-key="id"
    label-key="name"
    :table-props="tableProps"
    :disabled="disabled"
    :popper-width="1000"
    :cache-data="cacheData"
    :popper-options="{ strategy: 'fixed' }"
    @select="handleSelect"
    @visibleChange="visibleChange"
  >
    <template #topExtra>
      <el-form label-width="auto" size="small" class="product-search py-10px" @submit.prevent="">
        <el-row>
          <el-col :lg="8" :md="8" :sm="24" :xs="24">
            <el-form-item label="商品">
              <el-input v-model.trim="form.nickname" clearable placeholder="请输入商品名称/编码" />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="24" :xs="24">
            <el-form-item label-width="12px">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </ele-table-select>
</template>

<script setup>
import { listProduct } from '@/api/common'

const props = defineProps({
  /** 修改回显的数据 */
  where: {
    type: Object,
    default: () => {},
  },
  disabled: Boolean,
})

/** 表格下拉选中值 */
const selectedValue = ref([])

/** 选择框实例 */
const selectRef = ref(null)

/** 表单数据 */
const [form, resetFields] = utils.useFormData({
  keyword: '',
})

/** 表格配置 */
const tableProps = reactive({
  datasource: ({ pages, where, orders }) => {
    return listProduct({ ...where, ...props.where, ...orders, ...pages })
  },
  loadOnCreated: false,
  columns: [
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left',
      reserveSelection: true,
    },
    {
      type: 'index',
      columnKey: 'index',
      label: '序',
      width: 50,
      align: 'center',
      fixed: 'left',
    },
    {
      prop: 'name',
      label: '商品名称',
    },
    {
      prop: 'code',
      label: '商品编码',
      width: 140,
      align: 'center',
    },
    {
      prop: 'stock',
      label: '库存',
      width: 120,
      align: 'center',
    },
    {
      prop: 'unit',
      label: '主单位',
      width: 120,
      align: 'center',
    },
  ],
  showOverflowTooltip: true,
  toolbar: false,
  pagination: {
    pageSize: 6,
    layout: 'total, prev, pager, next, jumper',
    style: { padding: '0px' },
  },
  rowClickChecked: true,
})

/** 缓存数据 */
const cacheData = ref()

/** 搜索 */
function search(where) {
  selectRef.value?.tableRef?.reload?.({ where, page: 1 })
}

/**  重置 */
function reset() {
  resetFields()
  search()
}

/** 选中事件 */
function handleSelect(selection) {
  console.log(JSON.parse(JSON.stringify(selection)))
}

function visibleChange(visible) {
  if (visible) {
    search()
  }
}

defineExpose({
  search,
})
</script>

<style lang="scss" scoped>
.product-search .el-form-item {
  margin-bottom: 0;
}
</style>
